<template>
  <div class="myUpdate">
    <!-- 头部导航 -->
    <myheader title="修改信息页面" @updataInfo="approve" rightBtn="确定修改"></myheader>

    <!-- 姓名 -->
    <my-input>
      <template v-slot:myinput_title>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingming
        " />
        </svg>
        <span>姓名</span>
      </template>
      <template v-slot:myinput_input>
        <el-input v-model="thisUser.username"></el-input>
      </template>
    </my-input>

    <!-- 性别 -->
    <my-input>
      <template v-slot:myinput_title>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingbie
        " />
        </svg>
        <span>性别</span>
      </template>
      <template v-slot:myinput_input>
        <el-input v-model="thisUser.sex"></el-input>
      </template>
    </my-input>

    <!-- 年龄 -->
    <my-input>
      <template v-slot:myinput_title>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-nianling
        " />
        </svg>
        <span>年龄</span>
      </template>
      <template v-slot:myinput_input>
        <el-input oninput="value = value.replace(/[^0-9]/g,'')" v-model="thisUser.age"></el-input>
      </template>
    </my-input>

    <!-- 电话 -->
    <my-input>
      <template v-slot:myinput_title>
        <svg
          t="1630718864962"
          class="icon"
          viewBox="0 0 1026 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10005"
          width="200"
          height="200"
        >
          <path
            d="M365.677805 670.579551h294.687282V309.498254H365.677805v361.081297z m147.599003 38.814963c-17.364589 0-31.664838 14.300249-31.664838 32.175561s14.300249 32.175561 31.664838 32.175561 31.664838-14.300249 31.664838-32.175561-14.300249-32.175561-31.664838-32.175561zM626.657357 2.553616H399.896259C180.285287 2.553616 2.553616 180.285287 2.553616 399.896259v226.761098c0 219.610973 177.731671 397.342643 397.342643 397.342643h226.761098c219.610973 0 397.342643-177.731671 397.342643-397.342643V399.896259c0-219.610973-177.731671-397.342643-397.342643-397.342643z m85.290773 794.685287c0 15.832419-12.76808 28.600499-28.600499 28.600498H343.205985c-15.832419 0-28.600499-12.76808-28.600499-28.600498v-510.723192c0-15.832419 12.76808-28.600499 28.600499-28.600499h340.652369c15.832419 0 28.600499 12.76808 28.600499 28.600499v510.723192z"
            fill="#01C700"
            p-id="10006"
          />
        </svg>
        <span>电话</span>
      </template>
      <template v-slot:myinput_input>
        <el-input v-model="thisUser.phone"></el-input>
      </template>
    </my-input>

    <!-- 地址 -->
    <my-input>
      <template v-slot:myinput_title>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dizhi
        " />
        </svg>
        <span>地址</span>
      </template>
      <template v-slot:myinput_input>
        <!-- <div @click="showPopup" v-bind="thisUser.address"></div> -->
        <el-input
          class="address_input"
          @click="showPopup"
          v-on:mousedown="showPopup"
          readonly="readonly"
          v-model="thisUser.addres"
        ></el-input>
      </template>
    </my-input>

    <!-- 地址 -->
    <my-input>
      <template v-slot:myinput_title>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dizhi
        " />
        </svg>
        <span>详址</span>
      </template>
      <template v-slot:myinput_input>
        <el-input
          type="textarea"
          v-model="thisUser.address"
          maxlength="30"
          show-word-limit
          placeholder="请输入详细的地址"
        ></el-input>
      </template>
    </my-input>

    <van-popup v-model:show="show" position="bottom" get-container="#app">
      <van-area
        title="选择地址"
        ref="area1"
        :area-list="areaList"
        value="110101"
        :columns-num="3"
        v-on:cancel="cancel"
        v-on:confirm="confirm"
        v-on:change="changearea"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
    </van-popup>
  </div>
</template>

<script>
import areaJson from '../tool/area.js'
import myheader from '../../comon/myheader.vue' //头文件
import myInput from '../../comon/myInput.vue' //我的信息插槽
import { checkPhone } from '../../utils/tools'
import { Notify } from 'vant'
export default {
  components: {
    myheader,
    myInput,
  },
  data() {
    return {
      user: {}, //存放数据
      show: false, //弹出层开关
      areaList: areaJson,
      thisUser: {}, //修改后的用户数据
    }
  },

  created() {
    this.user = this.$store.getters.getUserInfo
    this.thisUser = this.user
  },
  methods: {
    /**
     * 弹出层的使用
     */
    showPopup(e) {
      this.show = true
    },
    /**
     * 点击确定时触发
     */
    confirm(val) {
      // console.log(val)
      this.thisUser.province = val[0].name
      this.thisUser.city = val[1].name
      this.thisUser.county = val[2].name
      this.getAddres()
      this.show = false
    },
    /**
     * 点击取消时触发
     */
    cancel() {
      this.show = false
    },
    /**
     * 改变的时候触发
     */
    changearea() {
      // console.log("触发了")
    },
    /**
     * 获取全部地址
     */
    getAddres() {
      this.thisUser.addres =
        this.thisUser.province + this.thisUser.city + this.thisUser.county
    },
    /**
     * 确定修改
     */
    approve() {
      // 用户名作为唯一标识  数据不能为空
      if (this.thisUser.name != '') {
        // 电话号码数据校验
        if (checkPhone(this.thisUser.phone)) {
          this.$axios
            .post('/sys/user/modify', {
              id: this.thisUser.id,
              username: this.thisUser.username,
              sex: this.thisUser.sex,
              age: this.thisUser.age,
              phone: this.thisUser.phone,
              bgImg: this.thisUser.bgImg,
              province: this.thisUser.province,
              city: this.thisUser.city,
              county: this.thisUser.county,
              address: this.thisUser.addres,
            })
            .then((r) => {
              console.log(r)
              if (r.data.code == 200) {
                // 如果修改成功更新vuex为最新的数据
                this.$store.commit('SET_USER', this.thisUser)
                Notify({ type: 'success', message: '更改信息成功' })
              }
            })
        }
      } else {
        Notify({ type: 'danger', message: '用户名不能为空' })
      }
    },
  },
  mounted() {
    this.getAddres()
  },
  watch: {
    county: function (newval, oldval) {
      this.thisUser.addres =
        this.thisUser.province + this.thisUser.city + this.thisUser.county
    },
  },
}
</script>

<style scoped>
.myUpdate {
  margin-top: 46px;
}
.address_input > input {
  pointer-events: none;
}
</style>
